<template>
    <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="formDisabled">
            <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
                <a-row>
                    <a-col :span="8">
                        <a-form-model-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="guestName">
                            <a-input v-model="model.guestName" placeholder="请输入姓名"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="证件类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="idType">
                            <j-dict-select-tag type="list" v-model="model.idType" dictCode="id_type"
                                placeholder="请选择证件类型" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="证件编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="idCode">
                            <a-input v-model="model.idCode" placeholder="请输入证件编号"></a-input>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="8">
                        <a-form-model-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sex">
                            <j-dict-select-tag type="list" v-model="model.sex" dictCode="sex" placeholder="请选择性别" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
                            <a-input v-model="model.phone" placeholder="请输入联系电话"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="出生日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="birthday">
                            <a-date-picker type="date" v-model="model.birthday" style="width: 100%;"
                                placeholder="请输入出生日期" :format="dateFormat" />
                        </a-form-model-item>
                    </a-col>

                </a-row>
                <a-row>
                    <a-col :span="8">
                        <a-form-model-item label="民族" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="nation">
                            <a-input v-model="model.nation" placeholder="请输入民族"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="国籍" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="nationality">
                            <a-input v-model="model.nationality" placeholder="请输入国籍"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="籍贯" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="nativePlace">
                            <a-input v-model="model.nativePlace" placeholder="请输入籍贯"></a-input>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="8">
                        <a-form-model-item label="证件地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="idAddress">
                            <a-input v-model="model.idAddress" placeholder="请输入证件地址"></a-input>
                        </a-form-model-item>
                    </a-col>


                    <a-col :span="8">
                        <a-form-model-item label="工作单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="company">
                            <a-input v-model="model.company" placeholder="请输入工作单位"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="账户状态" :labelCol="labelCol" :wrapperCol="wrapperCol"
                            prop="accountStatus">
                            <a-input v-model="model.accountStatus" placeholder="请输入账户状态"></a-input>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="8">
                        <a-form-model-item label="账户类型" :labelCol="labelCol" :wrapperCol="wrapperCol"
                            prop="accountType">
                            <j-dict-select-tag type="list" v-model="model.accountType" dictCode="account_type"
                                placeholder="请选择账户类型" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="房间号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="roomCode">
                            <!-- <a-input v-model="model.roomCode" placeholder="请选择房间号"></a-input> -->
                            <a-select v-model="model.roomCode" style="width: 100%">
                                <a-select-option v-for="item in roomList" :value="item.value" :key="item.value">
                                    {{ item.label }}
                                </a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </j-form-container>
    </a-spin>
</template>

<script>

import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import moment from 'moment'

export default {
    name: 'AddRenYuanForm',
    components: {
    },
    props: {
        dingdan: {
            type: Object,
            required: true,
        },
        //表单禁用
        disabled: {
            type: Boolean,
            default: false,
            required: false
        },
        selectedRoom: {
            type: Object,
            default: () => { }
        },
        selectRoomList: {
            type: Array,
            default: () => { }
        }
    },
    watch: {
        selectedRoom: {
            deep: true,
            immediate: true,
            handler(val) {
                if (!this.model.roomCode && val) {
                    this.model.roomCode = val.roomCode
                }
            }
        },
        'model.idCode'(val) {
            if (this.model.idCode.length === 18) {
                this.model.birthday = moment(this.model.idCode.substring(6, 10) + '-' + this.model.idCode.substring(10, 12) + '-' + this.model.idCode.substring(12, 14), this.dateFormat)
                this.model.sex = this.model.idCode.substring(16, 17) % 2 === 0 ? '2' : '1'
            }
        },
        selectRoomList: {
            deep: true,
            immediate: true,
            handler(val) {
                for (let i of this.selectRoomList) {
                    this.roomList.push({
                        label: i.roomCode,
                        value: i.roomCode
                    })
                }
            }
        }
    },
    data() {
        return {
            dateFormat: 'YYYY-MM-DD',
            roomList: [],
            model: {},
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 14 },
            },
            confirmLoading: false,
            validatorRules: {
                guestName: [{ required: true, message: '请完善内容' }],
                idType: [{ required: true, message: '请完善内容' }],
                idCode: [{ required: true, message: '请完善内容' }],
                sex: [{ required: true, message: '请完善内容' }],
                phone: [],
                birthday: [{ required: true, message: '请完善内容' }],
                nation: [],
                nationality: [],
                nativePlace: [],
                idAddress: [],
                company: [],
                accountStatus: [],
                accountType: [],
                roomCode: [{ required: true, message: '请完善内容' }],
            },
            url: {
                add: "/room/roomGuestRoom/add",
                edit: "/room/roomGuestRoom/edit",
                queryById: "/room/roomGuestRoom/queryById"
            }
        }
    },
    computed: {
        formDisabled() {
            return this.disabled
        },
    },
    created() {
        //备份model原始值
        this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
        moment,
        add() {
            this.edit(this.modelDefault);
        },
        edit(record) {
            this.model = Object.assign({}, record);
            this.visible = true;
        },
        submitForm() {
            const that = this;
            // if (!that.selectedRoom || !that.selectedRoom.id) {
            //     that.$message.warning('请先选择房间')
            //     return false
            // }
            // 触发表单验证
            this.$refs.form.validate(valid => {
                if (valid) {
                    that.confirmLoading = true;
                    let httpurl = '';
                    let method = '';
                    if (!this.model.id) {
                        httpurl += this.url.add;
                        method = 'post';
                    } else {
                        httpurl += this.url.edit;
                        method = 'put';
                    }
                    that.model.birthday = moment(that.model.birthday).format('YYYY-MM-DD')
                    httpAction(httpurl, {
                        roomRegisterCode: that.dingdan.roomRegisterCode,
                        ...that.model,
                        roomRegisterRoomId: that.selectRoomList.filter(item => item.roomCode === that.model.roomCode)[0].id,
                    }, method).then((res) => {
                        if (res.success) {
                            that.$message.success(res.message);
                            that.$emit('ok');
                        } else {
                            that.$message.warning(res.message);
                        }
                    }).finally(() => {
                        that.confirmLoading = false;
                    })
                }

            })
        },
    }
}
</script>